<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AdminLTE 3 | DataTables</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/plugins/fontawesome-free/css/all.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="/static/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="/static/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="/static/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Dashboard</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Dashboard v1</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>

<div class="wrapper">
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="rule_table" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>应用名称</th>
                                    <th>规则名称</th>
                                    <th>规则key</th>
                                    <th>阈值</th>
                                    <th>缓存时间</th>
                                    <th>探测间隔</th>
                                    <th>更新时间</th>
                                    <th>是否前缀匹配</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>

                                </tfoot>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>

<!-- ./wrapper -->

<!-- jQuery -->
<script src="/static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables  & Plugins -->
<script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="/static/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="/static/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="/static/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="/static/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="/static/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="/static/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->

<script>
    var user_tab;
    $(function () {
        var url = "/zhurong/rule/list";
        user_tab = $('#rule_table').DataTable({
            "dom": '<"top"i>rt<"bottom"flp><"clear">',
            //"ordering":false,//是否排序
            "processing": true,
            "searching": false,
            "serverSide": true,   //启用服务器端分页
            "bInfo": true,
            "bAutoWidth": false,
            "scrollX": true,
            "scrollCollapse": false,
            "language": {"url": "/static/language.json"},
            "ajax": {"url": url, "data": {}, "type": "post"},
            "columns": [
                {"data": "appName"},
                {"data": "ruleName"},
                {"data": "ruleKey"},
                {"data": "threshold"},
                {"data": "duration"},
                {"data": "interval"},
                {"data": "updateTime"},
                {"data": "prefix"}
            ],
            "columnDefs": [
                {
                    "targets": -1,
                    "data": null,
                    orderable: false,
                    "render": function (data) {
                        console.log(data);
                        var btn1 = '<a class="btn btn-xs btn-warning"  target="modal" modal="hg" href=""><i class="fa fa-edit"></i>修改</a>  ';
                        var btn2 = '<a class="btn btn-xs btn-danger"  target="modal" modal="hg" onclick="user_list_delete(' + data.id + ')"><i class="fa fa-remove"></i>删除</a>  ';
                        return btn1 + btn2;
                    }
                }
            ]
        }).on('preXhr.dt', function (e, settings, data) {
            No = 0;
        }).on('xhr.dt', function (e, settings, json, xhr) {
        });
    });

    //搜索框内容重置
    function user_list_reset() {
        $("input[name='user_list_repeatApply']").click();
    }

    //增加
    function user_list_add() {
    }

    //删除
    function user_list_delete(param) {
        var href = "/";
        var title = "<p>警告！ 所选取的数据将会被删除！</p>";
        var cb;
        if (param == "1") {
            var checkNum = $('input:checkbox[class="userCheckbox"]:checked').length;
            var checkVal = [];
            if (checkNum == 0) {
                alertMsg("<p>请选择数据</p>", "warning");
                return;
            }
            $.each($('input:checkbox[class="userCheckbox"]:checked'), function () {
                checkVal.push($(this).val());
            });
            cb = "user_list_delete_data('" + checkVal + "');";
        } else {
            cb = "user_list_delete_one_data('" + param + "');";
        }
        $("#smModal").attr("action", href).attr("callback", cb).find(".modal-body").html(title).end().modal("show");
    }

    function user_list_delete_data(checkVal) {
        var options = {
            url: '/admin/user/delete?checkVal=' + checkVal,
            type: 'get',
            dataType: 'text',
            success: function (data) {
                if (rule > 0) {
                    user_tab.draw(false);
                    alertMsg("<p>成功删除" + rule + "条记录</p>", "success");
                } else {
                    alertMsg("<p>删除失败</p>", "danger");
                }
            }
        };
        $.ajax(options);
    }

    function user_list_delete_one_data(id) {
        var options = {
            url: '/admin/user/deleteOne?id=' + id,
            type: 'get',
            dataType: 'text',
            success: function (data) {
                user_tab.draw(false);
                alertMsg("<p>删除成功</p>", "success");
            }
        };
        $.ajax(options);
    }

    //搜索
    function user_list_query() {
        user_list_setParm();
        user_tab.settings()[0].ajax.data = user_list_param;
        user_tab.ajax.reload();
    }

    //动态拼接参数
    function user_list_setParm() {
    }
</script>
</body>
</html>
